<template>
	<el-container class="home-container">
		<el-header>
			<div>
				<img src="@/assets/images/logo.png" alt />
				<span>后台管理系统</span>
			</div>
			<div>
				<el-avatar
					shape="circle"
					:size="40"
					fit="cover"
					icon="UserFilled"
					style="margin-right: 10px"
				></el-avatar>
				<el-button size="small" type="info" @click="logout"
					>退出</el-button
				>
			</div>
		</el-header>
		<el-container class="footer_main">
			<!-- 侧边栏 -->
			<el-aside :width="iscollapse ? '64px' : '200px'">
				<div class="toggle-button" @click="toggleCollapse">|||</div>
				<el-menu
					background-color="#09463e"
					text-color="#fff"
					active-text-color="#409eff"
					unique-opened
					:collapse="iscollapse"
					:collapse-transition="false"
					router
					:default-active="tabactive"
				>
					<!-- 一级菜单 -->
					<el-menu-item index="welcome">
						<el-icon><HomeFilled /></el-icon>
						<span> 首页 </span>
					</el-menu-item>
					<el-menu-item index="echarts">
						<el-icon><TrendCharts /></el-icon>
						<span> 图表 </span>
					</el-menu-item>

					<el-menu-item index="blog">
						<el-icon><Document /></el-icon>
						<span> 文章 </span>
					</el-menu-item>

					<el-menu-item index="publish">
						<el-icon><Edit /></el-icon>
						<span> 发布 </span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main> <router-view /> </el-main>
		</el-container>
	</el-container>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "@vue/runtime-core";
import { ElMessage } from "element-plus";
export default {
	name: "Home",
	setup() {
		const route = useRoute();
		const router = useRouter();

		const data = reactive({
			iscollapse: false,
			tabactive: "welcome",
		});

		onMounted(() => {
			data.tabactive = route.path.split("/")[1];
		});

		// 退出登录
		const logout = () => {
			// 清除token
			localStorage.removeItem("postsToken");
			ElMessage.success("已退出登录");
			setTimeout(() => {
				router.push({ path: "/login" });
			}, 500);
		};

		// 折叠面板
		const toggleCollapse = () => {
			data.iscollapse = !data.iscollapse;
		};

		return {
			...toRefs(data),
			logout,
			toggleCollapse,
		};
	},
};
</script>

<style lang="scss" scoped>
.home-container {
	height: 100%;
	.el-header {
		height: 60px;
		background-color: #09463e;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
		color: #fff;
		div {
			display: flex;
			align-items: center;
			img {
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}
			span {
				margin-left: 15px;
			}
		}
	}
	.footer_main {
		height: calc(100vh - 60px);
	}
	.el-aside {
		background-color: #09463e;
		.toggle-button {
			color: #fff;
			text-align: center;
			cursor: pointer;
		}
		.el-menu {
			border-right: none;
		}
	}
}
</style>
